<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- <div class="box">11</div> -->
    <input type="text" class="myinput" />
    <button>点击</button>
    <script>
    // 1. 样式操作  css 方法
    // 方式一: 直接修改样式 修改一个样式
    // $("button").click(function(){
    //     $(".box").css("width",200);
    // })

    // 方式二 ： 可以传入对象参数
    // $("button").click(function(){
    //     $(".box").css({width:"200px",height:"200px",background:"blue"});
    // })

    // 方式三 ： 获取样式的值 ,获取一个元素 。
    // $("button").click(function(){
    //   var res =  $(".box").css("background");
    //   console.log(res);
    // })


    // 2.操作文本 
    // 一、操作 html 
    // 设置html    获取html
    // innerHTML
    // $("button").click(function(){
    //     // document.querySelector(".box");
    //     // $(".box")[0].innerHTML = "hello";
    //     // $(".box").html("<h1>修改了</h1>");
    //     console.log($(".box").html());
    // })

    // 二、 text  设置或者 获取 文本 
    // innerText
    // $("button").click(function(){
    //     // 获取文本 
    //     // var txt = $(".box").text();
    //     // console.log(txt);

    //     // 设置文本
    //     $(".box").text("<h1>修改了</h1>");
    // })  


    // 三 、设置或者获取 输入框的值 ；val()
    // value 
    // $("button").click(function(){
    //     // 获取 input框里的值；
    //     // var val = $(".myinput").val();
    //     // console.log(val);
    //     // 设置 input框里的值 
    //     $(".myinput").val("设置了值");
    // })






    </script>
</body>
</html>